<template>
  <div>
    <Search></Search>
    <!--主内容-->
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="border-radius mg-t-20">
            <div class="screen-item">
              <div class="screen-title">
                <i class="el-icon-folder-opened"></i>
                分类
              </div>
              <div class="screen-body">
                <el-radio-group v-model="radio" size="small" @change="radioChange">
                  <el-radio-button label="0">全部</el-radio-button>
                  <el-radio-button :label="item.id" v-for="(item,index) in classifyList" :key="index">{{ item.classifyName }}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card class="border-radius mg-t-20">
            <div slot="header">
              <span class="fs-14">{{ classifyName }}</span>
            </div>
            <Links ref="Links" :classifyId="classifyId" :isPage="true" :isSort="true" :listSize="48"></Links>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: 'navigation',
  computed: {
    ...mapState({
      classifyList: state => state.classifyList,
      nav_config: state => state.config
    }),
  },
  //SEO优化
  head(){
    return{
      title: ((this.classifyName == null) ? "全部":this.classifyName) + this.nav_config.separate + "网站分类" + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords + "," + ((this.classifyName == null) ? "全部":this.classifyName) },
        { hid: 'description', name: 'description', content: this.nav_config.description },
      ]
    }
  },
  data(){
    return{
      id: null,
      //单选值
      radio: 0,
      //默认选中的标签
      defaultChecked: [],
    }
  },
  async asyncData(e) {
    let classifyId = null;
    let classifyName = null;
    let radioValue = null;
    if(e.params.id){
      //获取分类信息
      await e.app.$api_classify.getClassify(e.params.id).then(res => {
        if(res.code === 200){
          classifyId = res.data.id;
          classifyName = res.data.classifyName;
          radioValue = res.data.id;
        }
      });
    }
    return {
      classifyName: classifyName,
      classifyId: classifyId,
      radioValue: radioValue
    }
  },
  validate({ params, query }) {
    if(query.tag !== undefined){
      this.defaultChecked = query.tag.split(',');
    }
    if(params.id === undefined){
      return true;
    }
    this.id = params.id;
    // 必须是number类型
    return /^\d+$/.test(params.id)
  },
  created(){
    if(this.radioValue == null){
      this.radio = 0;
    }else{
      this.radio = this.radioValue;
    }
    this.id = this.$route.params.id;
    if(this.$route.query.tag !== undefined){
      this.defaultChecked = this.$route.query.tag.split(',');
    }
  },
  mounted() {
    this.$refs.Links.selectChange(this.defaultChecked);
  },
  methods: {
    //选择分类
    radioChange(e){
      if(e == 0){
        this.$router.push("/classify");
      }else{
        this.$router.push("/classify/" + e);
      }
    }
  }
}
</script>

<style scoped>
.screen-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.screen-item:last-child{
  margin: 0;
}
.screen-title{
  width: 100px;
  margin-right: 15px;
}
.screen-body{
  width: 100%;
}
.screen-body>div{
  width: 100%;
}
</style>
